@import 'sencha-touch/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;

// Your custom code goes here...


//custom shadow on map
.x-map {
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        -webkit-box-shadow: inset 0 3px 3px rgba(0,0,0,.4);
    }
}

//information
.information {
    .device-information {
        text-shadow: 0 1px 0 #fff;
        margin-top: 1.2em;
        padding: .6em;
        background: darken(#EEEEEE, 5);
        border: 1px solid darken(#EEEEEE, 15);
        @include border-radius(10px);
        @include box-shadow(inset 0 1px 3px #ccc);
    }
}
//orientation
#cube {
    -webkit-transform-style: preserve-3d;
    width: 200px;
    height: 200px;
    overflow: visible;
    opacity: .3;
}

#cube .x-innerhtml {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#cube .x-innerhtml > div {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: absolute;
    border: 1px solid #FFF;
}

#cube .x-innerhtml > div:first-child {
    -webkit-transform: rotateX(90deg) translateZ(100px);
    background-color: red;
}

#cube .x-innerhtml > div:nth-child(2) {
    -webkit-transform: translateZ(100px);
    background-color: green;
}

#cube .x-innerhtml > div:nth-child(3) {
    -webkit-transform: rotateY(90deg) translateZ(100px);
    background-color: blue;
}

#cube .x-innerhtml > div:nth-child(4) {
    -webkit-transform: rotateY(180deg) translateZ(100px);
    background-color: orange;
}

#cube .x-innerhtml > div:nth-child(5) {
    -webkit-transform: rotateY(-90deg) translateZ(100px);
    background-color: cyan;
}

#cube .x-innerhtml > div:nth-child(6) {
    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
}

